<!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title></title>
	<style>
		body{
			font-size:9pt;
			font-family:"굴림";		
		}
		div, p{
			border:1px #eeeeee solid;
			margin:10px;
		}
	</style>
	
	
	<script>
		window.onload=function(){
			var page = document.getElementById("sample_page");
			
			// 첫번째 영역에 추가하기.
			//1-1. 기준이 되는 위치찾기.
			var firstChild = page.firstChild;
			//1-2.<p> Element를 동적으로 생성.
			var p1 = document.createElement("p");		
			//1-3. textNode 생성.
			var text1 = document.createTextNode("추가내용1");
			//1-4. p1의 자식노드로 text1을 추가.
			p1.appendChild(text1);		
			p1.style.border	= "4px solid #ff0000";
			//1-5. p1을 #sample_page 첫번째 자식 노드 앞에 추가 
			page.insertBefore(p1, firstChild);		
			 
			
			// 두번째 영역에 추가하기.
			// 2-1. 기준이 되는 위치찾기.
			var content = document.getElementById("content");
			// 2-2. <div> Element를 동적으로 생성.
			var div1 = document.createElement("div");
			// 2-3. div의 내부 자식노드를  동적으로생성하기.
			var text2_1	= document.createTextNode("생성할 Node의 양이 많은 경우 ");
			var span = document.createElement("span");
			var spanText =  document.createTextNode("어떤 방법을 ");	
			span.appendChild(spanText);			
			var text2_2	= document.createTextNode("사용해야 할까요?");
			
			// 2-4. div의 자식노드로 컨텐츠들을 추가
			div1.appendChild(text2_1);
			div1.appendChild(span);
			div1.appendChild(text2_2);		
			div1.style.border = "4px solid #ff0000";
			
			//2-5.생성된 div1을 #content의 위쪽에 추가
			page.insertBefore(div1,content);
	
					
			// 세번째 영역에 추가하기.
			//3-1. <p> Element를 동적으로 생성.
			var p2 = document.createElement("p");
			//3-2. textNode 생성.
			var text2 = document.createTextNode("추가 내용2");
			//3-3. p2의 자식노드로 text2를  추가.		
			p2.appendChild(text2);
			p2.style.border	="4px solid #ff0000";
			//3-4. p2을 page마지막 위치에 추가.
			page.appendChild(p2);	
		}
	</script>
</head>
	
<body>
	<div id="sample_page" class="page" >
		샘플 페이지(div, id=sample_page, class=page)
		<div id="header">				
			헤더 영역(div, id=header)
		</div>
		<div id="content" class="sample_content">
			컨텐츠 영역(div, id=content, class=sample_content)
			<div> 
				JavaScript란?(div)
				<p id="data_1">1. 자바스크립트 Core(p, id=data_1)</p>
				<p id="data_2">2. 자바스크립트  BOM(p, id=data_2)</p>
				<p id="data_3">3. 자바스크립트 DOM(p, id=data_3)</p>
				을 배운다는것
			</div>
			<div class="content_data">
				자바스크립트에서 배울 내용(div, class=content_data)
				<p>1. 자바스크립트 DOM(p)</p>
				<p>2. 자바스크립트 Ajax(p)</p>
			</div>				
			<div class="content_data">
				jQuery에서 배울 내용(div, class=content_data)
				<p>1. jQuery DOM(p)</p>
				<p>2. jQuery Ajax(p)</p>
			</div>				
		</div>
		<div id="footer">				
			푸터 영역(div, id=footer)
		</div>
	</div>	
</body>


</html>
